<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的修饰符的使用</title>
</head>
<body>
<!-- 老韩解读
            1. 修饰符用于指出一个指令应该以特殊方式绑定。
            2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为
            3. 执行 程序员指定的方法
-->

<div id="app">
    <!--不加修饰符.prevent的话，点击submit会自动将数据提交到baidu.com,加了以后就会阻止原来提交的默认操作，而走onSubmit方法-->
    <form action=“http://www.baidu.com" v-on:submit.prevent="onsubmit()">
        妖怪名:<input type="text" v-model="monster.name"><br><br>
        <button type="submit">注册</button>
    </form>
    <P>服务器返回的数据是{{count}}</P>

</div>


</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
       el:"#app",
       data:{
           monster:{},
           count:0
       },
       methods:{
           onsubmit(){
               //"", null, undefined都是false
               if(this.monster.name){
                   alert(this.monster.name)
                   console.log("妖怪的名字是:"+this.monster.name);
                   //在这里，程序员就可以根据自己的业务发出ajax请求到后端
                   this.count = 9;
               }else{
                   alert("请输入妖怪的名字!")
                   // console.log("请输入妖怪的名字");
               }

           }
       }
    })
</script>
</html>